import React, { Component } from 'react'

import Link from 'next/link'

import config from '~/static/config'
import moment from 'moment'

import Page from '@/components/Page'
import { EyeOutlined, FieldTimeOutlined, DownOutlined } from '@ant-design/icons'
import Comment from '@/components/Comment'

class Item extends Component {
    render() {

        const {
            data = {},
            refetchData
        } = this.props

        const {
            comment = []
        } = data

        return (data.id ? <div className='item' >
            <div className='title'>{data.title}</div>
            <Link href={{ pathname: '/detail', query: { id: data.id } }}>
                <div className='content' dangerouslySetInnerHTML={{ __html: data.content }}></div>
            </Link>
            <div className='contentLast'>...</div>
            <div className='time'>
                <span><FieldTimeOutlined />&nbsp;{moment(+data.releaseTime * 1000).format('YYYY-MM-DD HH:mm:ss')}</span>
                <span><EyeOutlined />&nbsp;{data.seeNum}</span>
            </div>
            <Comment
                id={data.id}
                data={comment}
                refetchData={refetchData}
            />

            {/* 样式 */}
            <style jsx>{`
                .item {
                    box-sizing: border-box;
                    width: 100%;
                    padding: 20px;
                    background: rgba(255, 255, 255, .9);
                    border-radius: 4px;
                    margin-bottom: 20px;
                    color: #000000;
                    box-shadow: 8px 14px 38px rgba(39,44,49,.06), 1px 3px 8px rgba(39,44,49,.03);
                }
                .title {
                    font-size: 20px;
                    color: #f39d38;
                    font-weight: bold;
                }
                .content {
                    margin-top 10px;
                    overflow: hidden;
                    max-height 100px;
                    cursor: pointer;
                    padding: 0 20px;
                }
                .content:hover {
                    color: #f39d38;
                }
                .contentLast {
                    color: #000000;
                    padding: 0 20px;
                }
                .time {
                    margin-top: 12px;
                }
                .time span {
                    color: #738a94;
                    margin-right: 20px;
                }
            `}</style>
        </div > : null)
    }
}

class Index extends Component {
    state = {
        //配置信息
        pgConfig: {},
        //数据
        data: [],
        //加载状态
        loading: false,
        //空
        isEmpty: false,
    }

    componentDidMount() {
        this.fetchIndexConfig()
        this.fetchBlogList()
    }

    fetchBlogList = (loading = true) => {
        this.setState({
            loading
        }, () => {
            fetch(`${config.baseURL}/blog/list`)
                .then(response => {
                    return response.json()
                })
                .then(res => {
                    if (res.code === 200) {
                        const data = res.data ? res.data : []
                        this.setState({
                            data,
                            loading: false,
                            isEmpty: !data.length
                        })
                    }
                })
                .catch(err => {
                    this.setState({
                        data: [],
                        loading: false,
                        isEmpty: true
                    })
                })
        })
    }

    fetchIndexConfig = () => {
        fetch(`${config.baseURL}/blog/indexConfig`)
            .then(response => {
                return response.json()
            })
            .then(res => {
                if (res.code === 200) {
                    this.setState({
                        pgConfig: res.data
                    })
                }
            })
            .catch(err => {
                console.log(err)
            })
    }

    refetchData = () => {
        this.fetchBlogList(false)
    }

    render() {

        const {
            pgConfig,
            data,
            loading,
            isEmpty,
        } = this.state

        return (<Page
            isEmpty={isEmpty}
            loading={!!config.bg && loading}
        >
            <div className='main'>

                <div
                    className='bg'
                    style={{
                        background: `url(${pgConfig.bg}) no-repeat center center / cover`
                    }}
                >
                    {!!pgConfig.title && <div className='title' dangerouslySetInnerHTML={{ __html: pgConfig.title }}></div>}
                    {!!pgConfig.descs && <div className='descs' dangerouslySetInnerHTML={{ __html: pgConfig.descs }}></div>}
                    <i className='next'><DownOutlined /></i>
                </div>

                <div className='list'>
                    {data.map((itm, idx) => (<Item
                        key={idx}
                        data={itm}
                        refetchData={this.refetchData}
                    />))}
                </div>

            </div>

            {/* 样式 */}
            <style jsx>{`
                .bg {
                    width: 100%;
                    height: 100vh;
                    position: relative;
                    padding-top: 180px;
                }
                .title {
                    display: inline-block;
                    margin: 0 auto;
                    color: #000000;
                    font-size: 28px;
                    text-align: center;
                    padding: 6px 16px;
                    background: rgba(243,157,56,.9);
                    border-radius: 10px;
                    margin-left: 50%;
                    transform: translateX(-50%);
                }
                .descs {
                    color: #f39d38;
                    font-size: 26px;
                    margin-top: 60px;
                    text-align: center;
                }
                .next {
                    font-size: 30px;
                    color: #ffffff;
                    position: absolute;
                    left: 50%;
                    bottom: 20px;
                    margin-left: -15px;
                    transition: transform 1s;
                    transform: scaleX(1.4);
                }
                .list {
                    max-width: 1200px;
                    margin: 40px auto;
                }
            `}</style>
        </Page>)
    }
}

export default Index